<template>
	<view class="contentBox">
		<u-navbar title="拼团" :autoBack="true" :background="background" :border-bottom="none"></u-navbar>
		<scroll-view :class="['goods-team']" scroll-y="true"  @scrolltolower="getMore()">
			<mescroll-uni ref="mescroll" :up="{
          noMoreSize: 5,
          empty: {
            icon: 'https://cdn.zkjialan.com/img1/empty/shop.png',
            tip: '暂无拼团商品~',
            fixed: false,
          },
          textColor: optionTextColor,
        }" :down="{
          textColor: optionTextColor,
        }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<!-- Banner -->
				<!-- <view :class="['banner', { 'bg--primary': !hasGoods }]">
          <image
            class="title-image"
            src="https://cdn.zkjialan.com/img1/goods_team_banner.png"
          />
        </view> -->

				<!-- Goods List -->
				<view class="goods-contain">
					<view class="goods">
						<goods-card v-for="(goods, index) in goodsList" :key="index" shape="rectangle"
							:name="goods.name" :image="goods.min_cover"
							:contain-style="{ 'border-raius': 0, height: '250rpx' }"
							:image-style="{ width: '210rpx', height: '210rpx' }">
							<view @click="goGoodsDetail(goods.id)">
								<!-- 拼团信息 -->
								<view class="flex">
									<goods-team-icon :count="goods.people_num" />
									<text class="m-l-20 xs muted fontAr">已拼{{
                      Number(goods.activity_sales) +
                      Number(goods.virtual_sales_num)
                    }}件</text>
								</view>
								<!-- 价格信息 -->
								<view class="m-t-10 flex row-between">
									<view>
										<price class="fontAr" :content="goods.min_team_price" mainSize="34rpx" minorSize="24rpx"
											:color="themeColor" />
										<price  class="m-l-20 muted xs fontAr" :content="goods.max_price"
											:line-through="true" />
									</view>
									<!-- <view class="goods-button">拼团</view> -->
									<button class="br60 white btn" size="sm">拼团</button>
								</view>
							</view>
						</goods-card>
					</view>
				</view>
			</mescroll-uni>

			<view class="fixed-contain" @click="goOrderTeamList">
				<text>我的</text>
				<text>拼团</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		apiGoodsTeamList
	} from "@/api/goods";
	import {
		mapGetters,
		mapState
	} from "vuex";

	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";

	export default {
		name: "GoodsTeam",
		mixins: [MescrollMixin],

		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				goodsList: [], // 商家列表
			};
		},

		computed: {
			...mapGetters(["userInfo"]),

			// 是否有拼团商品
			hasGoods() {
				return !!this.goodsList.length;
			},

			// Scorll配置字体颜色
			optionTextColor() {
				return this.hasGoods ? "#FFFFFF" : "#808080";
			},
		},
		onShareAppMessage() {
			const {
				code
			} = this.userInfo;

			const share = {
				path: `bundle/pages/goods_team/goods_team?invite_code=${code}`,
			};
			return share;
		},
		methods: {
			getMore() {
				this.page_no++;
				this.$request.get(`shopapi/team/lists?page_size=10&page_no=${this.page_no}`).then(res => {
				this.seckillGoods.push(...res.data.data.lists);
				})
			},
			// 初始化Mescroll
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				this.downCallback();
			},

			// 下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll();
			},

			// 上拉加载更多
			upCallback(page) {
				console.log(page);
				this.page_no=page.num;
				apiGoodsTeamList({
						page_no: page.num,
						page_size: page.size,
					})
					.then(({
						lists,
						page_size,
						count
					}) => {
						if (page.num === 1) this.goodsList = [];
						this.goodsList = [...this.goodsList, ...lists];
						this.mescroll.endSuccess(lists.length, count);
					})
					.catch((err) => {
						this.mescroll.endBySize();
					});
			},

			// 去商品详情
			goGoodsDetail(id) {
				this.$Router.push({
					path: "/bundle/pages/goods_team_detail/goods_team_detail",
					query: {
						id
					},
				});
			},

			// 去拼团订单列表
			goOrderTeamList() {
				this.$Router.push({
					path: "/bundle/pages/goods_team_history/goods_team_history",
				});
			},
		},
	};
</script>

<style lang="scss">
	.btn {
		background-color: #f08329;
	}
	.fontAm{
		font-family: 'am';
	}
	.fontAr{
		font-family: 'ar';
	}
	/deep/ .goods-name {
		font-family: 'am';
		font-size: 30rpx;
	}
	/deep/.upwarp-nodata{
		color: #fff;
	}
	/deep/ .goods-images{
		width: auto !important;
		height: auto !important;
	}
	/deep/.goods--rectangle{
		height: 210rpx !important;
	}
	/deep/.u-image__image {
		border-radius: 15rpx !important;
	}

	/deep/.mescroll-uni-fixed {
		position: relative !important;
	}

	/deep/.u-image {
		width: 164rpx !important;
		height: 164rpx !important;
		border-radius: 15rpx !important;
	}

	/deep/.u-icon__icon,
	/deep/.u-title {
		color: #fff !important;
	}

	/deep/ .u-navbar {
		background-color: transparent !important;
	}

	.goods-team {
		display: flex;
		flex-direction: column;
		height: 85vh;
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
		overflow: scroll;

		.banner {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100rpx;
			width: 100%;
			margin-bottom: 20rpx;

			.title-image {
				width: 440rpx;
				height: 48rpx;
			}
		}

		.goods-contain {
			// padding: 0 20rpx;
		}

		.fixed-contain {
			position: fixed;
			right: 20rpx;
			bottom: 240rpx;
			z-index: 9;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			font-size: $-font-size-sm;
			font-weight: 500;
			border: $-solid-border;
			background-color: #ffffff;
		}
	}

	.bg--primary {
		@include background_linear();
	}

	.goods {
		margin-bottom: 30rpx;

		&-button {
			padding: 10rpx 35rpx;
			border-radius: 60px;
			font-size: $-font-size-nr;
			@include background_color();
			color: #ffffff;
		}
	}

	.contentBox {
		position: fixed;
		width: 100%;
		height: 100vh;
		background: url('https://cdn.zkjialan.com/img/product/goodsTeambg.jpg');
		background-size: 100% 100%;
	}
</style>